﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <style type="text/css">
        .header {
            padding: 2.5rem 0.5rem 2rem 0.5rem;
        }
      
    body { background: url(http://huafans.dbankcloud.com/pic/2017/08/06/b4630a2f0a45eae0de6ab93bdc2dd2cd__c7104f50a6bf43329f63e4b573491c83.jpg?mode=download);
		background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;}
    </style>
   
</head>
<body >
<header class="aui-bar aui-bar-nav aui-text-left header" id="header">
    <h1>
        <strong>
            <a class="aui-btn aui-pull-right" tapmode="" onClick="openClub()"> <i class="aui-iconfont aui-icon-mobile"></i> </a>
            村落推荐
        </strong>
    </h1>
</header>
<div class="aui-searchbar" id="search">
    <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="请输入搜索内容" id="search-input">
        </form>
    </div>
    <div class="aui-searchbar-cancel" tapmod>取消</div>
</div>


<div class="aui-content-padded">
    <ul class="aui-list-view">
        </br>
        <h2><i class="aui-iconfont aui-icon-map"></i>&nbsp;选择地区</h2>
        <p>&nbsp;</p>
        <p>
            <div class="aui-col-xs-3"><button id="btn1" class="aui" onClick="changeColor(1)">&nbsp;&nbsp;琼东&nbsp;&nbsp;</button>&nbsp; &nbsp;</div>
            <div class="aui-col-xs-3"><button id="btn2" class="aui" onClick="changeColor(2)">&nbsp;&nbsp;琼南&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
            <div class="aui-col-xs-3"><button id="btn3" class="aui" onClick="changeColor(3)">&nbsp;&nbsp;琼中&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
            <div class="aui-col-xs-3"><button class="aui" id="btn4" onClick="changeColor(4)">&nbsp;&nbsp;琼北&nbsp;&nbsp;</button></div>
        </p>
    </ul><br></br>
</div>

<div class="aui-content-padded">
    <ul class="aui-list-view">
        </br>
        <h2><em class="aui-iconfont aui-icon-my"></em> 出游类型</h2>
        <p>&nbsp;</p>
        <p>
            <div class="aui-col-xs-3"><button class="aui" id="btn5" onClick="changeColor(5)">&nbsp;&nbsp;亲子&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
            <div class="aui-col-xs-3"><button class="aui" id="btn6" onClick="changeColor(6)">&nbsp;&nbsp;朋友&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
            <div class="aui-col-xs-3"><button class="aui" id="btn7" onClick="changeColor(7)">&nbsp;&nbsp;情侣&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
            <div class="aui-col-xs-3"><button class="aui" id="btn8" onClick="changeColor(8)">&nbsp;&nbsp;老年&nbsp;&nbsp;</button></div>
        </p>
    </ul></br>
</div>

<div class="aui-content-padded">
    <ul class="aui-list-view">
        </br>
        <h2><em class="aui-iconfont aui-icon-like"></em> 行程偏好</h2>
        <p>&nbsp;</p>
        <li>
            <p>

                <div class="aui-col-xs-4"><button class="aui" id="btn9" onClick="changeColor(9)">&nbsp;&nbsp;观光&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
                <div class="aui-col-xs-4"><button class="aui" id="btn10" onClick="changeColor(10)">&nbsp;&nbsp;度假&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
                <div class="aui-col-xs-4"><button class="aui" id="btn11" onClick="changeColor(11)">&nbsp;&nbsp;民俗&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
            <p>&nbsp;</p>
            <div class="aui-col-xs-4"><button class="aui" id="btn12" onClick="changeColor(12)">&nbsp;&nbsp;探险&nbsp;&nbsp;</button></div></p>
            <div class="aui-col-xs-4"><button class="aui" id="btn13" onClick="changeColor(13)">&nbsp;&nbsp;美食&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
            <div class="aui-col-xs-4"><button class="aui" id="btn14" onClick="changeColor(14)">&nbsp;&nbsp;运动&nbsp;&nbsp;</button>&nbsp; &nbsp; </div>
        </li>
    </ul></br>
</div>

<div class="aui-content-padded">
    <ul class="aui-list-view">
        </br>
        <h2><em class="aui-iconfont aui-icon-calendar"></em> 出行时长</h2>
        <p>&nbsp;</p>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">

                <div class="aui-list-item-input">
                    <font color="#FFFFFF">
                        <div class="aui-range" onchange="value()">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="range" class="aui-range" value="2" max="4" min="1" step="1" id="days" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="daystext">
                                2日
                            </span>
                        </div>
                    </font>
                </div>
            </div>
        </li>
    </ul></br>
</div>

<div class="aui-content-padded">
    <ul class="aui-list-view">

        <h2><em class="aui-iconfont aui-icon-flag"></em> 特色项目</h2>
        <p>&nbsp;</p>
        <li>
            <p>

                <div class="aui-col-xs-4"><button class="aui" id="btn15" onClick="changeColor(15)">传统技艺体验</button> </div>
                <div class="aui-col-xs-4"><button class="aui" id="btn16" onClick="changeColor(16)">&nbsp;&nbsp;&nbsp;温泉/冷泉&nbsp;&nbsp;&nbsp;</button> </div>
                <div class="aui-col-xs-4"><button class="aui" id="btn17" onClick="changeColor(17)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;采摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></div>
            <p>&nbsp;</p>
            <div class="aui-col-xs-4"><button class="aui" id="btn18" onClick="changeColor(18)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赶海&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></div></p>
            <div class="aui-col-xs-4"><button class="aui" id="btn19" onClick="changeColor(19)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赏花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> </div>
            <div class="aui-col-xs-4"><button class="aui" id="btn20" onClick="changeColor(20)">&nbsp;&nbsp;&nbsp;荒野探索&nbsp;&nbsp;&nbsp;&nbsp;</button> </div>
        </li>
    </ul></br>
</div>

<div class="aui-content-padded">
    <ul class="aui-list-view">
        </br>
        <h2><em class="aui-iconfont aui-icon-cart"></em> 预期费用</h2>
        <p>&nbsp;</p>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <font color="#FFFFFF">
                    <div class="aui-list-item-input">
                        <div class="aui-range" onchange="value1()">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="range" class="aui-range" value="2" max="3" min="1" step="1" id="days1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="daystext1">100-200元/日/人</span>
                        </div>
                    </div>
                    </font>
            </div>
        </li>
    </ul></br>
</div>
<a href="result.html"><p><div class="aui-btn aui-btn-primary aui-btn-block" tapmode onclick="showDefault('loading')">立即定制</div></p></a>


</body>
</html>

<script type="text/javascript" src="./script/aui-toast.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
    }
    var toast = new auiToast({
    })
    function showDefault(type) {
        switch (type) {
            case "success":
                toast.success({
                    title: "提交成功",
                    duration: 2000
                });
                break;
            case "fail":
                toast.fail({
                    title: "提交失败",
                    duration: 2000
                });
                break;
            case "custom":
                toast.custom({
                    title: "提交成功",
                    html: '<i class="aui-iconfont aui-icon-laud"></i>',
                    duration: 2000
                });
                break;
            case "loading":
                toast.loading({
                    title: "加载中",
                    duration: 2000
                }, function (ret) {
                    console.log(ret);
                    setTimeout(function () {
                        toast.hide();
                    }, 3000)
                });
                break;
            default:
                // statements_def
                break;
        }
    }

</script>
<script>
    function changeColor(num) {
        var str = document.getElementById('btn' + num);
        if (str.className == "aui")
            str.className = "aui-btn-success";
        else
            str.className = "aui";
    }
    function value() {
        var r = document.getElementById('days')
        var text = document.getElementById('daystext')
        if (r.value == 1) text.innerHTML = "1日";
        if (r.value == 2) text.innerHTML = "2日";
        if (r.value == 3) text.innerHTML = "3-4日";
        if (r.value == 4) text.innerHTML = "5日及以上";
    }

    function value1() {
        var r = document.getElementById('days1')
        var text = document.getElementById('daystext1')
        if (r.value == 1) text.innerHTML = "100元/日/人以内";
        if (r.value == 2) text.innerHTML = "100-200元/日/人";
        if (r.value == 3) text.innerHTML = "200元/日/人以上";
    }

</script>
<script type="text/javascript" src="~/script/api.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.setStatusBarStyle({
            style: 'light'
        });
        api.parseTapmode();
        var header = $api.byId('header');
        var headerPos = $api.offset(header);
        var body_h = $api.offset($api.dom('body')).h;
        var header_h = $api.offset($api.byId('header')).h;
        api.openFrame({
            name: 'index_frm',
            url: './html/index_frm.html',
            bounces: true,
            rect: {
                x: 0,
                y: header_h,
                w: 'auto',
                h: 'auto'
            }
        })
    };
    function openClub() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name: 'club_win',
            url: './html/club_win.html',
            bounces: false,
            delay: delay,
            slidBackEnabled: true,
            vScrollBarEnabled: false,
            progress: {
                type: "page"
            }
        });
    }
    function closeWin() {
        api.closeWin({
        });
    }
</script>
